<style lang="less" scoped>
.icon-add,
.icon-reduce {
  padding: 0;
}
.btn-grp {
  padding: 0;
}
img.Signed {
  position: absolute;
  margin: 0.2rem 0.2rem 0;
  width: 104px;
  height: 57px;
  zoom: 0.6;
  top: 0;
  right: 0;
}
</style>

<template>
  <div>
    <app-head :show="showstate" :title="pagetitle"></app-head>
    <div class="car-bbinfo-card mb30">
      <div class="bbno lineb">业务单号：{{data.BBillNo}}</div>
      <div class="bbmain">
        <p class="displayflex"><i>制单时间</i><label class="flex1">{{data.CreateTime | time}}</label></p>
        <p class="displayflex"><i>取货地址</i><label class="flex1">{{data.DepartureCity | city}}{{data.DepartureDistrict | district}}{{data.DepartureAddress}}</label></p>
        <p class="displayflex"><i>联系人</i><label class="flex1">{{data.SendContacts}} {{data.SendContactsTel}}</label></p>
        <!-- <p class="displayflex"><i>总件数</i><label class="flex1">{{data.Pkgs}}件</label></p> -->
      </div>
    </div>

    <div class="car-bbinfo-list">
      <div class="bbtitle lineb">
        <i class="iconfont icon-cargo circle"></i>
        {{totaldetialcount}}种商品
      </div>

      <scroller
        lock-x
        scrollbar-y
        use-pullup
        :height="(scrollerHeight).toString()"
        v-if="totaldetialcount>0"
        :pullup-config="ScrollerConfig"
        ref="Scroller"
      >
        <div>
          <div class="mb30" style="position:relative" v-for="item in data.Tratvehicleex">
            <div class="bbitem displayflex">
              <img :src="item.PictContent | filterImgUrl">
              <div class="flex1 specs">
                <p class="ft17 mb10 name">{{item.mfgood.GoodsName}}</p>
                <p>规格：{{item.mfgood.GoodsSpec}}</p>
                <p>厂商：{{item.mfgood.Producer}}</p>
                <p>件数：{{item.Pkgs}}件</p>
              </div>
            </div>
            <img class="Signed" src="~images/icon/tag_yth.png" v-if="item.checked == true">
            <div class="cf choiced-bot">
              <template v-if="item.checked == false">
                <div class="f-l">提货件数：</div>
                <div class="num-selector displayflex f-l">
                  <i class="iconfont icon-reduce" @click="changeNum(item, -1)"></i>
                  <input
                    number
                    type="text"
                    class="flex1"
                    v-model="item.ConPKGS"
                    @input="iptBlur(item)"
                  >
                  <i class="iconfont icon-add" @click="changeNum(item, 1)"></i>
                </div>
                <div class="f-r btn" @click="checkItem(item)">
                  <i class="iconfont icon-cargo"></i>提货
                </div>
              </template>
              <template v-else>
                <div class="f-l">提货件数：{{item.ConPKGS}}件</div>
              </template>
            </div>
          </div>
        </div>
      </scroller>
    </div>

    <div id="detailBottom" class="detail-bottom displayflex">
      <span>
        共计：
        <em class="red">{{TotalCounts}}</em> 件商品
      </span>
      <div class="flex1 btn-grp">
        <div @click="$router.go(-1)" class="btn gray">取消</div>
        <div @click="Next()" class="btn">确认提货</div>
      </div>
    </div>
  </div>
</template>

<script>
import footerMenu from "@/components/core/footer/manage.footer.vue";
import appHead from "@/components/core/header/app_headbar.vue";
import { mapGetters, mapState } from "vuex";
export default {
  components: {
    footerMenu,
    appHead
  },
  data() {
    return {
      data: {},
      TotalCounts: 0,
      totaldetialcount:0,
      ScrollerConfig: {
        content: "",
        downContent: "",
        height: 0,
        loadingContent: "",
        upContent: ""
      }
    };
  },
  mounted() {
    this.$store.dispatch("cfg/setConHeight");
  },
  created() {
    this.getData();
  },
  computed: {
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    }
  },
  methods: {
    getData() {
      let query = {
        Guid: this.$route.query.AtvGuid,
        BBillNo: this.$route.query.BBillNo,
      };
      this.Ajax.post("GetTaskorderDetailEX", query).then(resp => {
        if (resp.IsSuccess) {
          resp.Data.Tratvehicleex.forEach((x) => {
            x.ConPKGS = x.Pkgs;
            x.checked = false;
          })
          this.data = resp.Data;
          this.totaldetialcount = this.data.Tratvehicleex.length;
          this.amountNum();
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },

    Next() {
      // this.data.ConPKGS = this.TotalCounts;
      sessionStorage.setItem('pickUpOrderData', JSON.stringify(this.data));
      this.$router.push({
        path: "carPickUpDone"
      });
    },

    checkItem(item) {
      item.checked = true;
    },

    //加减
    changeNum: function(item, way) {
      if (way > 0) {
        if (item.ConPKGS < item.Pkgs) {
          item.ConPKGS++;
        } else {
          this.Toast({ message: "提货件数不得大于总件数" });
        }
      } else if (way < 0 && item.ConPKGS > 0) {
        item.ConPKGS--;
      } else {
        this.Toast({
          message: "请输入大于0的数"
        });
      }
      this.amountNum();
    },

    //数量输入框
    iptBlur(item) {
      if (item.ConPKGS === "") {
        item.ConPKGS = 0;
      }
      if (item.ConPKGS > item.Pkgs) {
        item.ConPKGS = item.Pkgs;
        this.Toast({ message: "提货件数不得大于总件数" });
      }
      item.ConPKGS = parseInt(item.ConPKGS);
      this.amountNum();
    },

    amountNum() {
      this.TotalCounts = 0;
      this.data.Tratvehicleex.forEach(x => {
        let qty = x.ConPKGS || 0;
        this.TotalCounts += qty;
      });
    }
  }
};
</script>
